<template>
	<div>
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form label-width="140px" :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
					<el-form-item label="管片：" prop="BlockGroup">
						<el-select clearable v-model="listQuery.BlockGroup" @change='gpChange'>
							<div v-for="(item,index) in gpList" :key="index">

								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="BlockNo">
						<el-input v-model="listQuery.BlockNo"></el-input>
					</el-form-item>

					<el-form-item label="管理形式：" prop="ManageWay">
						<el-select clearable v-model="listQuery.ManageWay" placeholder="全部" style="width: 100%">
							<el-option label="正常" value="正常"></el-option>
							<el-option label="新纳入" value="新纳入"></el-option>
							<el-option label="托管房屋" value="托管房屋"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产别：" prop="OwnWay">
						<el-select clearable v-model="listQuery.OwnWay" placeholder="全部" style="width: 100%">
							<el-option label="公产" value="公产"></el-option>
							<el-option label="代管产" value="代管产"></el-option>
							<el-option label="经营产" value="经营产"></el-option>
							<el-option label="托管产" value="托管产"></el-option>
							<el-option label="教会产" value="教会产"></el-option>
							<el-option label="国有自营产" value="国有自营产"></el-option>
							<el-option label="股份企业产" value="股份企业产"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地级(住)：" prop="AddressLevelLiving" label-width="140px">
						<el-select clearable v-model="listQuery.AddressLevelLiving">
							<el-option label="一级" value="一级" key="1"></el-option>
							<el-option label="二级" value="二级" key="2"></el-option>
							<el-option label="三级" value="三级" key="3"></el-option>
							<el-option label="四级" value="四级" key="4"></el-option>
							<el-option label="五级" value="五级" key="5"></el-option>
							<el-option label="*" value="*" key="6"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地级(非)：" prop="AddressLevelNonLiving" label-width="140px">
						<el-select clearable v-model="listQuery.AddressLevelNonLiving">
							<el-option label="甲级" value="甲级" key="1"></el-option>
							<el-option label="乙级" value="乙级" key="2"></el-option>
							<el-option label="丙级" value="丙级" key="3"></el-option>
							<el-option label="丁级" value="丁级" key="4"></el-option>
							<el-option label="茂级" value="茂级" key="5"></el-option>
							<el-option label="特级" value="特级" key="6"></el-option>
							<el-option label="*" value="*" key="7"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="建筑形式：" prop="BuildingForm" label-width="140px">
						<el-select clearable v-model="listQuery.BuildingForm">
							<el-option label="楼房" value="楼房" key="1"></el-option>
							<el-option label="平房" value="平房" key="0"></el-option>
						</el-select>
					</el-form-item>

				</div>
			</el-form>
			<div div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
				<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">租用住房基本情况</div>
			<div style="margin-top: 20px;margin-left: 20px;">附件1</div>

			<div class="head" style="margin-top: 10px;">
				<div class="head1">住房坐落</div>
				<div class="head2">
					<div style="margin-left: 150px;margin-top: 10px;">{{addQuery.address}}区(县)</div>
					<div style="margin-left: 400px;margin-top: 10px;">{{addQuery.buildingdoorno}}号</div>
				</div>
			</div>
			<div style="display: flex;">
				<div class="list2">产别</div>
				<div class="list2" style="width: 230px;">{{addQuery.ownway}}</div>
				<div class="list2">居室间数</div>
				<div class="list2" style="width: 230px;">{{addQuery.roomcount}}</div>
			</div>
			<div style="display: flex;">
				<div class="list3">计租面积</div>
				<div class="list3" style="width: 230px;line-height: 30px;">
					<div class="list3Content">独用：{{addQuery.singleusearea}}</div>
					<div class="list3Content">伙用：{{addQuery.sharearea}}</div>
				</div>
				<div class="list3" style="white-space: pre-wrap;line-height: 30px;box-sizing: border-box;padding: 0 10px;">
					每月租金金额</div>
				<div class="list3" style="width: 230px;">{{addQuery.monthrent}}</div>
			</div>
			<div style="display: flex;">
				<div class="list4">间号</div>
				<div class="list4">用途</div>
				<div class="list4">使用面积</div>
			</div>
			<div style="display: flex;" v-for="(item,index) in fjList" :key="index">
				<div class="list4">{{item.roomno}}</div>
				<div class="list4">{{item.use}}</div>
				<div class="list4">{{item.rentarea}}</div>
			</div>
		</div>

		<button style="margin: 10px auto 0;display: block;" v-print="printObj">打印租用住房基本情况</button>
		<div id="loading" v-show="printLoading"></div>
	</div>
</template>

<script>
	import {
		listContract,
		createContract,
		submitContract,
		faFangContract,
		deleteContractById,
		authContract,
		updateContract,
		renterRoomList
	} from "@/api/management";
	import {
		getArea,
		getHouseAdmin,
		blockGroupList,
		blockList
	} from '@/api/industry'
	import {
		Message
	} from "element-ui";
	import moment from "moment";

	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				// 管片列表
				gpList: [],
				isSearch: false,
				listQuery: {
					BlockGroup: '',
					BlockNo: '',
					ManageWay: '',
					OwnWay: '',
					AddressLevelLiving: '',
					AddressLevelNonLiving: '',
				},
				fjList: [],
				rentId: '',
				addQuery: {},
			};
		},

		computed: {},

		mounted() {
			console.log(JSON.parse(this.$route.query.rentId))
			this.addQuery = JSON.parse(this.$route.query.addQuery)
			this.rentId = this.$route.query.rentId
			this.blockGroupList()
			this.renterRoomList()
		},

		methods: {
			renterRoomList() {
				let data = {
					rentId: this.rentId
				}
				console.log(data)
				renterRoomList(data).then(res => {
					console.log(res)
					this.fjList = res.data
				})
			},
			// 管片列表
			blockGroupList() {
				let data = {
					pageNum: 1,
					pageSize: 9999999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.gpList = res.data.list
					this.listLoading = false
				})
			},
			//管片
			gpChange(e) {
				this.listQuery.BlockGroup = e
			},
			handleSearch() {

			}
		},
	};
</script>
<style scoped>
	.publicpageview {
		width: 600px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		outline: 1px solid black;
	}

	.head {
		display: flex;
		width: 600px;
	}

	.head1 {
		width: 70px;
		height: 70px;
		outline: 1px solid black;
		font-size: 24px;
		text-align: center;
	}

	.head2 {
		width: 530px;
		outline: 1px solid black;
	}

	.list2 {
		width: 70px;
		height: 40px;
		outline: 1px solid black;
		text-align: center;
		line-height: 40px;
	}

	.list3 {
		width: 70px;
		height: 60px;
		outline: 1px solid black;
		text-align: center;
		line-height: 60px;
	}

	.list3Content {
		outline: 1px solid black;
		height: 30px;
		text-align: left;
		box-sizing: border-box;
		padding-left: 20px;
	}

	.list4 {
		width: 200px;
		outline: 1px solid black;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
</style>